<template>
  <el-card class="user-content-analysis" shadow="never">
    <template #header>
      <div class="card-header">
        <span>内容分析</span>
        <el-tag v-if="contentInfo?.publishFrequency" type="info" size="small">
          {{ contentInfo.publishFrequency }}天/篇
        </el-tag>
      </div>
    </template>

    <div class="content-analysis">
      <!-- 发布时间信息 -->
      <div class="publish-info">
        <div class="info-row">
          <div class="info-item">
            <span class="label">首次发布:</span>
            <span class="value">{{
              formatDateTime(contentInfo?.firstPublishTime)
            }}</span>
          </div>
          <div class="info-item">
            <span class="label">最近发布:</span>
            <span class="value">{{
              formatDateTime(contentInfo?.lastPublishTime)
            }}</span>
          </div>
        </div>

        <div class="info-row">
          <div class="info-item">
            <span class="label">平均浏览量:</span>
            <span class="value highlight"
              >{{ formatNumber(contentInfo?.avgViewsPerArticle || 0) }}/篇</span
            >
          </div>
          <div class="info-item">
            <span class="label">平均点赞数:</span>
            <span class="value highlight"
              >{{ formatNumber(contentInfo?.avgLikesPerArticle || 0) }}/篇</span
            >
          </div>
        </div>
      </div>

      <!-- 分类统计 -->
      <div v-if="contentInfo?.categoryStats?.length" class="category-stats">
        <h4>分类统计</h4>
        <div class="category-list">
          <div
            v-for="category in contentInfo.categoryStats"
            :key="category.categoryName"
            class="category-item"
          >
            <div class="category-header">
              <span class="category-name">{{ category.categoryName }}</span>
              <span class="category-count">{{ category.articleCount }}篇</span>
            </div>
            <div class="category-stats-row">
              <div class="stat">
                <IconifyIconOffline icon="ep:view" />
                <span>{{ formatNumber(category.totalViews) }}</span>
              </div>
              <div class="stat">
                <IconifyIconOffline icon="ep:star" />
                <span>{{ formatNumber(category.totalLikes) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 热门标签 -->
      <div v-if="contentInfo?.topTags?.length" class="top-tags">
        <h4>热门标签</h4>
        <div class="tags-container">
          <el-tag
            v-for="tag in contentInfo.topTags"
            :key="tag"
            type="primary"
            effect="light"
            size="small"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>

      <!-- 发布频率图表 -->
      <div v-if="contentInfo?.publishFrequency" class="publish-frequency">
        <h4>发布频率</h4>
        <div class="frequency-display">
          <div class="frequency-circle">
            <div class="frequency-value">
              {{ contentInfo.publishFrequency }}
            </div>
            <div class="frequency-unit">天/篇</div>
          </div>
          <div class="frequency-description">
            <p>{{ getFrequencyDescription(contentInfo.publishFrequency) }}</p>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { IconifyIconOffline } from "@/components/ReIcon";
import { formatNumber, type UserContentInfo } from "@/api/admin-user-profile";

interface Props {
  contentInfo?: UserContentInfo | null;
}

defineProps<Props>();

const formatDateTime = (timeStr?: string) => {
  if (!timeStr) return "暂无";
  return new Date(timeStr).toLocaleDateString("zh-CN");
};

const getFrequencyDescription = (frequency: number): string => {
  if (frequency <= 1) {
    return "发布非常频繁，内容产出能力很强";
  } else if (frequency <= 3) {
    return "发布比较频繁，保持良好的更新节奏";
  } else if (frequency <= 7) {
    return "发布频率适中，每周都有新内容";
  } else if (frequency <= 30) {
    return "发布频率较低，偶尔更新内容";
  } else {
    return "发布频率很低，很少更新内容";
  }
};
</script>

<style lang="scss" scoped>
// 响应式设计
@media (width <= 768px) {
  .user-content-analysis {
    .content-analysis {
      .publish-info {
        .info-row {
          grid-template-columns: 1fr;
          gap: 12px;
        }
      }

      .publish-frequency {
        .frequency-display {
          flex-direction: column;
          gap: 12px;
          text-align: center;

          .frequency-circle {
            width: 60px;
            height: 60px;

            .frequency-value {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}

.user-content-analysis {
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
  }

  .content-analysis {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .publish-info {
      .info-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .info-item {
          display: flex;
          flex-direction: column;
          gap: 4px;

          .label {
            font-size: 12px;
            font-weight: 500;
            color: #64748b;
          }

          .value {
            font-size: 14px;
            color: #1f2937;

            &.highlight {
              font-weight: 600;
              color: #059669;
            }
          }
        }
      }
    }

    .category-stats,
    .top-tags,
    .publish-frequency {
      h4 {
        padding-bottom: 8px;
        margin: 0 0 12px;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
      }
    }

    .category-stats {
      .category-list {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .category-item {
          padding: 12px;
          background: #f9fafb;
          border: 1px solid #e5e7eb;
          border-radius: 8px;

          .category-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;

            .category-name {
              font-weight: 600;
              color: #1f2937;
            }

            .category-count {
              padding: 2px 8px;
              font-size: 12px;
              color: #6b7280;
              background: #e5e7eb;
              border-radius: 12px;
            }
          }

          .category-stats-row {
            display: flex;
            gap: 16px;

            .stat {
              display: flex;
              gap: 4px;
              align-items: center;
              font-size: 12px;
              color: #6b7280;

              .iconify {
                font-size: 14px;
              }
            }
          }
        }
      }
    }

    .top-tags {
      .tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
    }

    .publish-frequency {
      .frequency-display {
        display: flex;
        gap: 20px;
        align-items: center;

        .frequency-circle {
          display: flex;
          flex-shrink: 0;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 80px;
          color: #fff;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 50%;

          .frequency-value {
            font-size: 20px;
            font-weight: 600;
            line-height: 1;
          }

          .frequency-unit {
            font-size: 10px;
            opacity: 0.9;
          }
        }

        .frequency-description {
          flex: 1;

          p {
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
            color: #6b7280;
          }
        }
      }
    }
  }
}
</style>
